<template>
    <div>
        <headers></headers>
         <van-row>
             <van-col span="4">
              <left/>
            </van-col>
            <van-col span="20">
                <van-field
                v-model="name"
                name="name"
                label="角色名称"
                placeholder="请输入角色名称"
                :rules="[{ required: true, message: '请输入角色名称' }]"
            /><van-button type="info">查询</van-button>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <div>
                <table class="t1">
                <tr>
                <td>角色名称</td>
                <td>操作</td>
                </tr>
                <tr v-for="i in rolelist" :key="i.id">
                <td>{{i.name}}</td>
                <td>
                    <button @click="role_resource(i.id)">配置资源</button></td>
                </tr>
            </table>

            </div>
            </van-col>
         </van-row>
         <van-row>
            <van-col span="4"></van-col>
            <van-col span="20">
                <div v-show="is_show">
                    <el-transfer
                        v-model="value"
                        :props="{
                            key: 'id',
                            label: 'name',
                        }"
                        :data="resourceslist">
                    </el-transfer>
                    <button @click="add_res(id)">确认</button>
                    <button @click="ss">取消</button>
                </div>
            </van-col>
         </van-row>
    </div>
</template>

<script>
import headers from '../comm/headers.vue'
import left from '../comm/left.vue'
import axios from 'axios'
import maxios from '../http/axios'
export default {
    components:{
        'headers':headers,
        'left':left,
    },
    data() {
        return {
            rolelist:[],
            resourceslist:[],
            value:[],
            is_show:false,
            role_id:0
        }
    },
    methods: {
        getrole(){
            axios({url:'http://localhost:5000/role',method:'get'}).then(res => {
                this.rolelist = res.data.list
                this.getresource()
            })
        },
        getresource(){
            axios({url:'http://localhost:5000/resource',method:'get'}).then(res => {
                this.resourceslist = res.data.list
            })
        },
        ss(){
            this.is_show = false
        },
        generateData(){
            for (let i = 0; i < this.resourceslist.length; i++) {
                this.value.push(
                    i['id']
                    // desc: `Option ${i}`,
                    // disabled: i % 4 === 0,
                )
            }
        },
        add_res(){
            maxios('role_resource?id='+this.roleid,'post',this.value).then(res=>{
                alert(res.msg)
            })
        },
        role_resource(id){
            this.is_show = true
            this.roleid = id
            maxios('resource?id='+id,'get').then(res=>{
                this.value = res.list
            })
        },
    },
    created() {
        this.getrole()
    }
}
</script>

<style scoped>
.t1{
    width: 50%;
    height: 30%;
    margin-top: 30px;
}
</style>
